<template>
    <div v-loading="loading" class="content">
        <navbar @selectNav="onSelectNav"></navbar>
        <div class="container minHeight">
            <div class="container-fluid">
                <div class="col-lg-12">
                    <div class="container banner-inner text-center">
                        <div class="search">
                            <input type="text" placeholder="请输入关键字..." v-model="searchValue" @keyup.enter="onSearch" />
                            <button class="btn-common" @click="onSearch">搜索</button>
                        </div>
                    </div>
                </div>

                <el-tabs style="margin-top:40px" v-model="activeName" @tab-click="handleClick" type="border-card"
                    v-if="tabs && tabs.length">
                    <el-tab-pane :label="tab.colTitle" :name="tab.colTitle" v-for="tab in tabs" :key="tab.colId">
                        <div class="row" style="padding:0 10px" v-if="tab.colTitle == activeName">
                            <div class="col-lg-12">
                                <div class="list-view">
                                    <div class="course-text mt-10" style="cursor: pointer"
                                        v-for="(item, index) in tab.result" :key="index" @click="enterDetail(item)">
                                        <div class="table-view">
                                            <div class="table-cell pr-10">
                                                <h3><a>{{ item.colTitle }}</a></h3>
                                            </div>
                                        </div>
                                        <div class="course-meta" style="border:none">
                                            <a><i class="fa fa-calendar"></i>{{ item.colDate }}</a>
                                            <a v-if="item.colPublishUserName"><i class="fa fa-user"></i>{{
                                                item.colPublishUserName }}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row align-items-center mt-30 justify-content-center justify-content-sm-end" v-if="tab.colTitle == activeName">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="currentTab.pagination.pageNum" :page-size="currentTab.pagination.pageSize"
                                :layout="currentTab.pagination.layout" :total="currentTab.pagination.total">
                            </el-pagination>
                        </div>
                    </el-tab-pane>
                </el-tabs>
                <div class="container empty text-center" v-else>没有搜索结果</div>
            </div>

        </div>
        <footers></footers>
    </div>
</template>
    
<script>
import { Footers, Navbar } from '@/layout/components'
export default {
    components: {
        Navbar,
        Footers
    },
    data() {
        return {
            activeName: '',
            trends: [],
            searchValue: '',

            tabs: [],
            currentTab: {
                pagination: {
                    pageSize: 10,
                    layout: 'total, prev, pager, next',
                    pageNum: 1
                },
            },
            loading: false
        }
    },
    created() {
        const search = this.$route.query.search
        this.searchValue = search
        if (search) {
            this.getSearchList(search)
        }
    },
    methods: {
        onSelectNav(item) {
            if (item.colPath) {
                this.$router.push({
                    path: item.colPath,
                    query: {
                        title: item.colTitle,
                        colId: item.colId,
                        colQuery: item.colQuery
                    }
                })
            }
        },
        handleClick(tab) {
            console.log(tab)
            const selectTab = this.tabs[tab.index]
            if (selectTab.colId != this.currentTab.colId) {
                this.currentTab = selectTab
                this.activeName = selectTab.colTitle
                this.getArticleSearchList(selectTab)
            }
        },
        enterDetail(item) {
            const path = this.currentTab.colPath
            this.$router.replace({
                path: path,
                query: {
                    colId: item.colId,
                    navId: item.colNavMenuId,
                    type: 'detail'
                }
            })
        },
        handleSizeChange(pageSize) {
            this.currentTab.pagination.pageSize = pageSize
            this.getArticleSearchList(this.currentTab)
        },
        handleCurrentChange(pageNum) {
            this.currentTab.pagination.pageNum = pageNum
            this.getArticleSearchList(this.currentTab)
        },
        onSearch() {
            this.getSearchList()
        },
        async getSearchList() {
            try {
                this.loading = true
                await this.getArticleTypeSearch()
                if (this.tabs.length > 0) {
                    this.currentTab = this.tabs[0]
                    this.activeName = this.currentTab.colTitle
                    await this.getArticleSearchList(this.tabs[0])
                }
                this.loading = false
            } catch (error) {
                this.tabs = []
                this.loading = false
            }

        },
        // 搜索文章分类
        getArticleTypeSearch() {
            return this.$api.common.getArticleTypeSearch({
                searchValue: this.searchValue
            }).then(res => {
                const data = res.data
                if (data.code == 200) {
                    console.log(data)
                    const rows = data.rows
                    this.tabs = []
                    for (let index = 0; index < rows.length; index++) {
                        const element = rows[index];
                        this.tabs.push({
                            pagination: {
                                pageSize: 10,
                                layout: 'total, prev, pager, next',
                                pageNum: 1,
                            },
                            result: [],
                            ...element
                        })
                    }
                }
            })
        },
        // 通过文章分类搜索列表
        getArticleSearchList(tab) {
            return this.$api.common.getArticleSearchList({
                searchValue: this.searchValue,
                articleType: tab.colId,
                pageSize: tab.pagination.pageSize,
                pageNum: tab.pagination.pageNum
            }).then(res => {
                const data = res.data
                if (data.code == 200) {
                    tab.result = data.rows
                    tab.pagination.total = data.total
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>

.content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

i {
    color: $mainColor !important;
}

.btn-common {
    background-color: $mainColor;
    border: 1px solid $mainColor;
}

.minHeight {
    flex: 1;
}

.empty {
    height: 100%;
    line-height: 400px;
    font-size: 30px;
}

.search {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 30px;

    input {
        height: 60px;
        width: 85%;
        padding-left: 30px;
        border: 1px solid #ebebeb;
        margin-top: -1px;
        border-radius: 60px 0px 0px 60px;
    }

    button {
        width: 15%;
        height: 60px;
        border-radius: 0;
        margin-left: -4px;
        border-radius: 0 60px 60px 0;
        cursor: pointer !important;
    }
}

.course-meta {
    width: 30% !important;
}

</style>